<template>
	<view class="callBackBox">
		<up-sticky>
			<Header></Header>
		</up-sticky>
		<view class="main">
			<view class="boxOne">
				<view class="boxOneContent">
					<view class="ContentTitle">
						回拨系统
					</view>
					<view class="ContentTex">
						主叫变被叫，解决主叫外呼高频封号的问题
					</view>
					<view class="ContentBut" @click="handleShowSignup">
						申请试用
					</view>
				</view>
			</view>
			<view class="boxTwo">
				<view class="boxTwoContent">
					<view class="boxTwoContent-top">
						传统电销系统拨号无人接听？
					</view>
					<view class="boxTwoContent-bott">
						<view class="bott-item">
							<view class="itemImg">
								<image src="../../static/callBack/callBackImg2.png" mode=""></image>
							</view>
							<view class="itemText">
								通话线路不稳定
							</view>
						</view>
						<view class="bott-item">
							<view class="itemImg">
								<image src="../../static/callBack/callBackImg3.png" mode=""></image>
							</view>
							<view class="itemText">
								人工外呼效率低
							</view>
						</view>
						<view class="bott-item">
							<view class="itemImg">
								<image src="../../static/callBack/callBackImg4.png" mode=""></image>
							</view>
							<view class="itemText">
								电销成本居高不下
							</view>
						</view>
						<view class="bott-item">
							<view class="itemImg">
								<image src="../../static/callBack/callBackImg5.png" mode=""></image>
							</view>
							<view class="itemText">
								客户资源跟进慢
							</view>
						</view>
						<view class="bott-item">
							<view class="itemImg">
								<image src="../../static/callBack/callBackImg6.png" mode=""></image>
							</view>
							<view class="itemText">
								数据整理耗时耗力
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="boxThree">
				<view class="boxThreeBox">
					<view class="boxThreeText">
						灵活智能的配置 让呼入体验达到新高度!
					</view>
					<view class="boxThreeImg">
						<image src="../../static/callBack/callBackImg7.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="boxFour">
				<view class="boxFour-title">
					产品功能
				</view>
				<view class="boxFourContent">
					<up-scroll-list>
						<view v-for="item in boxFourCardList" :key="item.id" @click="handleFourCardItem(item)">
							<view class="cardItem" :class="{'bgCardItem' :boxFourNum == item.id }">
								<view class="box-title">
									{{item.title}}
								</view>
								<view class="box-textBox">
									<view class="box-text">
										{{item.Text1}}
									</view>
									<view class="box-text">
										{{item.Text2}}
									</view>
								</view>
							</view>
						</view>
					</up-scroll-list>
				</view>
			</view>

			<view class="boxFive">
				<view class="boxFive-title">
					我们的优势
				</view>
				<view class="boxFiveContent">
					<view class="boxFiveContentBox">
						<view class="content-item">
							<view class="box">
								<view class="leftImg">
									<image src="../../static/callBack/callBackImg8.png" mode=""></image>
								</view>
								<view class="text">
									提供优质线路，多元化呼叫方式，线路稳定，通话质量好，不受高频外呼限制，确保外呼畅通无阻。
								</view>
							</view>
						</view>
						<view class="content-item">
							<view class="box">
								<view class="leftImg bottimg">
									<image src="../../static/callBack/callBackImg9.png" mode=""></image>
								</view>
								<view class="text">
									外显真实手机号，接通率高使用方便随时随地可用稳定性好，完全避免了高频封号问题。
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<Footer></Footer>

			<up-modal :show="showSignUp" @confirm="handleConfirm" title="立即试用" ref="uModal" @cancel="handleClose"
				showCancelButton cancelText="取消" confirmText="立即拨打">
				<view class="hello">
					<view class="iconfont fa-bodadianhua"></view>
					<view>电话联系:</view>
					<view>13261388898</view>
				</view>
			</up-modal>

		</view>
	</view>
</template>

<script setup>
	import Header from '../compontents/header.vue'
	import Footer from '../compontents/footer.vue'
	import {
		ref
	} from 'vue'
	import api from '../../utils/request.js'
	const boxFourNum = ref(1)
	const boxFourCardList = ref([{
			id: 1,
			title: "通话质量好",
			Text1: "优质线路资源匹配",
			Text2: "还原真实通话环境"
		},
		{
			id: 2,
			title: "线路稳定",
			Text1: "多条线路可选择",
			Text2: "支持大并发"
		},
		{
			id: 3,
			title: "降低投诉封号",
			Text1: "稳定性好",
			Text2: "避免高频封号风险"
		}
	])
	const handleFourCardItem = function(item) {
		boxFourNum.value = item.id
	}
	const showSignUp = ref(false)

	const uToastRef = ref(null)
	const signRefForm = ref(null)

	const handleShowSignup = function() {
		showSignUp.value = true;
	}
	const handleClose = function() {
		showSignUp.value = false;
	}
	const handleConfirm = function() {
		uni.makePhoneCall({
			phoneNumber: '13261388898', // 电话号码
			success: function() {
				console.log('拨打电话成功');
			},
			fail: function() {
				console.log('拨打电话失败');
			}
		});
	}
</script>

<style lang="scss" scoped>
	:deep(.u-form-item__body__left__content__label) {
		font-size: 25rpx;
	}

	:deep(.uni-input-placeholder) {
		font-size: 24rpx;
	}

	:deep(.u-input__content__field-wrapper__field) {
		height: 0;
	}

	:deep(.u-modal__button-group__wrapper__text) {
		font-size: 28rpx;
	}

	:deep(.u-modal__title) {
		font-size: 28rpx;
	}

	.hello {
		width: 100%;
		height: 60px;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
		font-size: 16px;

		.fa-bodadianhua {
			color: #006bec;
		}
	}

	.callBackBox {
		width: 100%;

		.main {
			width: 100%;
			overflow-x: hidden;
		}

		.boxOne {
			height: 310rpx;
			background-image: url('../../static/callBack/callBackImg1.png');
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;

			.boxOneContent {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				padding-left: 68rpx;

				.ContentTitle {
					font-size: 56rpx;
					font-weight: 600;
					color: #3f3f3f;
				}

				.ContentTex {
					font-size: 23rpx;
					color: #777878;
				}

				.ContentBut {
					width: 173rpx;
					height: 58rpx;
					line-height: 58rpx;
					text-align: center;
					color: #fff;
					font-size: 25rpx;
					font-weight: 550;
					background-color: #3f68f5;
					border-radius: 16rpx;
				}
			}
		}

		.boxTwo {
			height: 577rpx;
			padding: 0 19rpx;

			.boxTwoContent {
				width: 100%;
				height: 100%;

				.boxTwoContent-top {
					height: 143rpx;
					line-height: 143rpx;
					text-align: center;
					font-size: 32rpx;
					font-weight: 600;
				}

				.boxTwoContent-bott {
					height: calc(100% - 173rpx);
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					gap: 19rpx;

					.bott-item {
						height: 156rpx;
						width: 221rpx;
						background-color: #ebf5fd;
						border-radius: 16rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						gap: 10rpx;

						.itemImg {
							width: 90rpx;
							height: 82rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.itemText {
							font-size: 22rpx;
						}
					}
				}
			}
		}

		.boxThree {
			height: 141rpx;
			background-color: #4771fa;
			padding: 0 25rpx;

			.boxThreeBox {
				display: flex;
				height: 100%;
				justify-content: space-between;
				align-items: center;

				.boxThreeText {
					font-size: 29rpx;
					color: #fff;
					font-weight: 600;
				}

				.boxThreeImg {
					width: 122rpx;
					height: 127rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.boxFour {
			height: 482rpx;

			.boxFour-title {
				height: 98rpx;
				line-height: 98rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 600;
			}

			.boxFourContent {
				height: calc(100% - 98rpx);
				padding-left: 20rpx;

				.bgCardItem {
					width: 256rpx;
					height: 290rpx;
					background-image: url('../../static/callBack/callBackImg0.png');
					background-size: 125%;
					background-position: center center;
					background-repeat: no-repeat;
					color: #fff;
				}

				.cardItem {
					width: 256rpx;
					height: 290rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					align-items: center;
					border: 1rpx solid #eee;
					border-radius: 16rpx;
					box-shadow: 0 0 25rpx #eee;
					margin: 0 20rpx 0 0;

					.box-title {
						font-size: 30rpx;
						font-weight: 550;
					}

					.box-textBox {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						gap: 10rpx;

						.box-text {
							font-size: 25rpx;
							font-weight: 520;
						}
					}
				}
			}
		}

		.boxFive {
			height: 433rpx;

			.boxFive-title {
				height: 67rpx;
				display: flex;
				justify-content: center;
				align-items: self-end;
				font-size: 32rpx;
				font-weight: 600;
			}

			.boxFiveContent {
				height: calc(100% - 67rpx);
				padding: 0 19rpx;

				.boxFiveContentBox {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					gap: 26rpx;

					.content-item {
						width: 100%;
						box-sizing: border-box;
						height: 127rpx;
						background: linear-gradient(to bottom, #cdecfb, #e6f2fd);
						border-radius: 16rpx;
						padding: 0 40rpx 0 20rpx;

						.box {
							width: 100%;
							height: 100%;
							display: flex;
							align-items: center;
							gap: 13rpx;

							.bottimg {
								width: 156rpx !important;
							}

							.leftImg {
								width: 196rpx;
								height: 87rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}

							.text {
								font-size: 24rpx;
								line-height: 36rpx;
								color: #535354;
							}
						}
					}
				}
			}
		}
	}
</style>